<template>
    <div class="box">
        <div class="scale" :style="{paddingBottom: r || '56.25%'}">
            <div class="item">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props : {
        ration : {
            type : String
        }
    },
    computed : {
        r(){
            if(!this.ration || this.ration.indexOf('/') == -1) return undefined
            let [a, b] = this.ration.split('/')
            return b * (100 / a) + '%'
        }
    }
}
</script>

<style lang="scss" scoped>
   .box {
       width: 100%;
       /* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
       .scale {
            width: 100%;
            height: 0;
            position: relative;
            .item {
                width: 100%;
                height: 100%;
                position: absolute;
                overflow: hidden;
            }
        }
   }
</style>